<template>
  <el-menu
    style="min-height: 100%; overflow-x: hidden"
    background-color="#333744"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse-transition="false"
    :collapse="isCollapse"
    :default-active="$route.path"
    router
  >
    <div style="height: 60px; line-height: 60px; text-align: center">
      <img
        src="../assets/logo.svg"
        alt=""
        style="width: 20px; position: relative; top: 5px; margin-right: 5px"
      />
      <b style="color: #fff" v-show="logoTextShow">{{
        $t("common.description")
      }}</b>
    </div>
    <div v-for="item in menus" :key="item.id">
      <div v-if="item.path">
        <el-menu-item :index="item.path">
          <component
            :is="item.icon"
            style="width: 18px; height: 18px; margin-right: 4px"
            :title="item.name"
          >
          </component>
          <template #title>{{ item.name }}</template>
        </el-menu-item>
      </div>
      <div v-else>
        <el-sub-menu :index="item.id + ''">
          <template #title>
            <component
              :is="item.icon"
              style="width: 18px; height: 18px; margin-right: 4px"
            />
            <span>{{ item.name }}</span>
          </template>
          <div v-for="subItem in item.children" :key="subItem.id">
            <el-menu-item :index="subItem.path">
              <component :is="subItem.icon" style="width: 18px; height: 18px" />
              <template #title>{{ subItem.name }}</template>
            </el-menu-item>
          </div>
        </el-sub-menu>
      </div>
    </div>
  </el-menu>
</template>

<script>
export default {
  name: "Aside",
  props: {
    isCollapse: Boolean,
    logoTextShow: Boolean,
  },
  data() {
    return {
      // 在这数据是从浏览器本地存储获取JSON 但是没写
      // menus: localStorage.getItem("menus")? JSON.parse(localStorage.getItem("menus")) : [],
      opens: localStorage.getItem("menus")? JSON.parse(localStorage.getItem("menus")).map((v) => v.id + "") : [],
      // 改为固定数据
      
    };
  },
  created() {
   this.menus=[
      {
        id: 1,
        name: "首页",
        path: "/home",
        icon: "HomeFilled",
        description: "首页",
        pid: null,
        pagePath: "Home",
        children: [],
        sortNum: 1,
        lang: "zhCn",
      },
      {
        id: 40,
        name: "数据分析",
        path: "/bi",
        icon: "Refresh",
        description: "数据分析",
        pid: null,
        pagePath: "/App/apps",
        children: [],
        sortNum: 9,
        lang: "zhCn",
      },
      {
        id: 9,
        name: "系统管理员",
        path: null,
        icon: "Avatar",
        description: "系统管理员",
        pid: null,
        pagePath: null,
        children: [
          {
            id: 12,
            name: "员工管理",
            path: "/search",
            icon: null,
            description: null,
            pid: 9,
            pagePath: "Personnel management/Search",
            children: null,
            sortNum: null,
            lang: "zhCn",
          },
        ],
        sortNum: 13,
        lang: "zhCn",
      },
      {
        id: 14,
        name: "权限管理",
        path: null,
        icon: "Share",
        description: null,
        pid: null,
        pagePath: null,
        children: [
          {
            id: 15,
            name: "角色管理",
            path: "/role",
            icon: null,
            description: null,
            pid: 14,
            pagePath: "sys/Role",
            children: null,
            sortNum: null,
            lang: "zhCn",
          },
          {
            id: 16,
            name: "菜单管理",
            path: "/menu",
            icon: null,
            description: null,
            pid: 14,
            pagePath: "sys/Menu",
            children: null,
            sortNum: null,
            lang: "zhCn",
          },
        ],
        sortNum: 14,
        lang: "zhCn",
      },
    ]
  },

};
</script>

<style>
/*解决收缩菜单文字不消失问题*/
.el-menu--collapse span {
  visibility: hidden;
}
</style>